<style lang="less">
@import '../../../styles/table-common.less';
</style>
<template>
	<div class="search">
		<Card>
			<Row @keydown.enter.native="handleSearch">
				<Form ref="searchForm" :model="searchForm" inline :label-width="70">
					<FormItem label="抽奖分类" prop="categoryId">
						<Select v-model="searchForm.categoryId" style="width: 200px">
							<Option v-for="item in classifyData" :value="item.id" :key="item.id">{{ item.title }}</Option>
						</Select>
					</FormItem>

					<FormItem style="margin-left: -35px" class="br">
						<Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
						<Button @click="handleReset">重置</Button>
					</FormItem>
				</Form>
			</Row>
			<Row class="operation">
				<Button @click="add" type="primary" icon="md-add">添加抽奖池</Button>
			</Row>
			<!-- <Row class="operation"><Button @click="delAll" icon="md-trash">批量删除</Button></Row> -->
			<Row>
				<Alert show-icon>
					已选择
					<span class="select-count">{{ this.selectList.length }}</span>
					项
					<a class="select-clear" @click="clearSelectAll">清空</a>
				</Alert>
				
			</Row>
			<Row>
				<Table
					:loading="loading"
					border
					:columns="columns"
					:data="data"
					sortable="custom"
					@on-sort-change="changeSort"
					@on-selection-change="showSelect"
					ref="table"
				></Table>
			</Row>
			<!-- <Row type="flex" justify="end" class="page">
				<Page
					:current="searchForm.pageNum"
					:total="total"
					:page-size="searchForm.pageSize"
					@on-change="changePage"
					@on-page-size-change="changePageSize"
					:page-size-opts="[10, 20, 50]"
					size="small"
					show-total
					show-elevator
					show-sizer
				></Page>
			</Row> -->
		</Card>
		
		<orderDetail :data="form" v-model="detailShow" />
	</div>
</template>

<script>
import { getOrderList, removeOrder, sendOrder } from '@/api/index';
import orderDetail from './orderDetail.vue';
export default {
	name: 'gift-pool-manage',
	components: {
		orderDetail
	},
	data() {
		return {
			height: 510,
			showUser: false,
			detailShow: false,
			showType: '0',
			loading: true,
			selectList: [],
			searchKey: '',
			searchForm: {
				pageNum: 1,
				pageSize: 10,
				sort: 'createTime',
				order: 'desc'
			},
			form: {},
			columns: [
				{
					type: 'selection',
					width: 60,
					align: 'center',
					fixed: 'left'
				},
				{
					type: 'index',
					width: 60,
					align: 'center',
					fixed: 'left'
				},
				{
					title: '商品名称',
					key: 'drawProductName',
					minWidth: 120
				},
				{
					title: '商品图片',
					key: 'drawProductPic',
					minWidth: 180,
					align: 'center',
					render: (h, params) => {
						return h('div', {
							attrs: {
								style: 'width: 40px;height: 40px;'
							},
						}, [
							h('img', {
								props: {
									type: 'primary',
									size: 'small'
								},
								attrs: {
									src: params.row.drawProductPic[0],
									style: 'width: 40px;height: 40px;border-radius: 2px;'
								},
							}),
						]);
					},
				},
				{
					title: '支付金额',
					key: 'payMoney',
					minWidth: 120,
					align: 'center'
				},
				{
					title: '支付状态',
					key: 'payStatus',
					minWidth: 120,
					align: 'center',
					render: (h, params) => {
						if (params.row.payStatus === 0) {
							return h('div', '待支付')
						} else if (params.row.payStatus === 1) {
							return h('div', '已支付')
						} else if (params.row.payStatus === 2) {
							return h('div', '支付失败')
						} else {
							return h('div', '--')
						}
					}
				},
				{
					title: '订单状态',
					key: 'orderStatus',
					minWidth: 120,
					align: 'center',
					render: (h, params) => {
						if (params.row.orderStatus === 0) {
							return h('div', '未完成')
						} else if (params.row.orderStatus === 1) {
							return h('div', '已完成')
						} else {
							return h('div', '--')
						}
					}
				},
				{
					title: '操作',
					key: 'action',
					width: 170,
					align: 'center',
					fixed: 'right',
					render: (h, params) => {
						return h('div', [
							h(
								'a',
								{
									on: {
										click: () => {
											this.showDetail(params.row);
										}
									}
								},
								'详情'
							),
							h('Divider', {
								props: {
									type: 'vertical'
								}
							}),
							,
							h(
								'a',
								{
									on: {
										click: () => {
											this.remove(params.row);
										}
									}
								},
								'删除'
							),
							h('Divider', {
								props: {
									type: 'vertical'
								}
							}),
							,
							h(
								'a',
								{
									on: {
										click: () => {
											this.send(params.row);
										}
									}
								},
								'发货'
							),
						]);
					}
				}
			],
			data: [],
			total: 0,
			classifyData: []
		};
	},
	methods: {
		init() {
			this.getDataList();
		},
		changePage(v) {
			this.searchForm.pageNum = v;
			this.getDataList();
			this.clearSelectAll();
		},
		changePageSize(v) {
			this.searchForm.pageSize = v;
			this.getDataList();
		},
		getDataList() {
			// 多条件搜索用户列表
			this.loading = true;
			getOrderList(this.searchForm).then(res => {
				this.loading = false;
				if (res.success) {
					this.data = res.result;
					// this.total = res.result.totalElements;
					if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
						this.searchForm.pageNumber -= 1;
						this.getDataList();
					}
				}
			});
		},
		getClassifyList() {
			getAllGiftClassifyList().then(res => {
				if (res.success) {
					this.classifyData = res.result;
				} else {
					this.classifyData = [];
				}
			})
		},
		handleSearch() {
			this.searchForm.pageNum = 1;
			this.searchForm.pageSize = 10;
			this.getDataList();
		},
		handleReset() {
			this.$refs.searchForm.resetFields();
			this.searchForm.pageNum = 1;
			this.searchForm.pageSize = 10;
			this.selectDep = [];
			// 重新加载数据
			this.getDataList();
		},
		changeSort(e) {
			this.searchForm.sort = e.key;
			this.searchForm.order = e.order;
			if (e.order == 'normal') {
				this.searchForm.order = '';
			}
			this.getDataList();
		},
		showDetail(v) {
			// 转换null为""
			for (let attr in v) {
				if (v[attr] == null) {
					v[attr] = '';
				}
			}
			let str = JSON.stringify(v);
			let data = JSON.parse(str);
			this.form = data;
			this.title = '详情';
			this.detailShow = true;
		},
		add() {
		  this.showType = "2";
		  this.showUser = true;
		},
		edit(v) {
		  // 转换null为""
		  for (let attr in v) {
		    if (v[attr] == null) {
		      v[attr] = "";
		    }
		  }
		  let str = JSON.stringify(v);
		  let data = JSON.parse(str);
		  this.form = data;
		  this.showType = "1";
		  this.showUser = true;
		},
		
		remove(v) {
			this.$Modal.confirm({
				title: '确认删除',
				content: '您确认要删除该条帖子吗 ?',
				loading: true,
				onOk: () => {
					removeOrder({ ids: v.orderId }).then(res => {
						this.$Modal.remove();
						if (res.success) {
							this.clearSelectAll();
							this.$Message.success('删除成功');
							this.getDataList();
						}
					});
				}
			});
		},
		showSelect(e) {
			this.selectList = e;
			this.selectList.length = e.length;
		},
		clearSelectAll() {
			this.$refs.table.selectAll(false);
		},
		delAll() {
			if (this.selectList.length <= 0) {
				this.$Message.warning('您还未选择要删除的数据');
				return;
			}
			this.$Modal.confirm({
				title: '确认删除',
				content: '您确认要删除所选的 ' + this.selectList.length + ' 条数据?',
				loading: true,
				onOk: () => {
					let ids = '';
					this.selectList.forEach(function(e) {
						ids += e.orderId + ',';
					});
					ids = ids.substring(0, ids.length - 1);
					removeOrder({ ids: ids }).then(res => {
						this.$Modal.remove();
						if (res.success) {
							this.$Message.success('删除成功');
							this.clearSelectAll();
							this.getDataList();
						}
					});
				}
			});
		},
		// 发货
		send(v) {
			if (v.payStatus !== 1) {
				this.$Message.warning('该订单还未支付！');
				return 
			}
			this.$Modal.confirm({
				title: '发货',
				content: '您确认要发货吗?',
				loading: true,
				onOk: () => {
					sendOrder({ id: v.orderId }).then(res => {
						this.$Modal.remove();
						if (res.success) {
							this.$Message.success('发货成功');
							this.getDataList();
						}
					});
				}
			});
		}
	},
	mounted() {
		// 计算高度
		this.height = Number(document.documentElement.clientHeight - 230);
		this.init();
	}
};
</script>
